<template>
  <public-dialog
    :title="title"
    width="40%"
    v-model:visible="visible"
    :confirm-disabled="isLoading"
    confirm-button-title="确认"
  >
    <el-upload
            v-loading="isLoading"
            :show-file-list="false"
            element-loading-text="loading..."
            ref="uploadRef"
            action="#"
            class="upload-demo"
            drag
            :http-request="uploadFile"
            :on-remove="onRemove"
    >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
            将文件拖到此处或 <em>单击上载</em>
        </div>
        <template #tip v-if="isTip">
            <div class="el-upload__tip" @click="onDownload">
                <em>模版下载</em>
            </div>
        </template>
    </el-upload>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {ref} from "vue";
import {ElLoading, ElMessage, ElUpload} from "element-plus";
import {UploadFilled} from "@element-plus/icons-vue";
import {exportExcelFile, getInterface} from "@/common/utils/GlobalUtils";
const props = defineProps({
    title:{
        type:String,
        default:'数据表导入'
    },
    isTip:{
        type:Boolean,
        default: true
    },
    interfaceConfig:{
        required:true,
        type:Object,
    },
    templateConfig:{
        type:Object,
        default:{
            fileName:'',
            apiPath:'',
            param:{},
            templateName:''
        }
    }
});

const visible = ref(false);
const isLoading = ref(false);
const emits = defineEmits(['onSuccess']);

/**
 * 上传
 * @param file
 */
const uploadFile = (file) => {
    let uploadFile = new FormData();
    uploadFile.append('file', file.file);
    isLoading.value = true;
    getInterface(props.interfaceConfig.fileName, props.interfaceConfig.apiPath, uploadFile).then(res=>{
        if (res.code === "200") {
            isLoading.value = false;
            visible.value = false;
            ElMessage.success('上传成功!');
            emits('onSuccess');
        }else{
            isLoading.value = false;
            visible.value = false;
            ElMessage.error('上传失败!');
        }
    }).catch(error => {
        isLoading.value = false;
        visible.value = false;
        ElMessage.error(error);
    });

   /* uploadFile.append('associationId', props.associationId)
    uploadFile.append('businessType ', props.businessType)

    const addTypeArray = file.file.name.split(".");
    const addType = addTypeArray[addTypeArray.length - 1]

    if(addType === "docx" || addType === "pdf"){
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        let url = 'uploadDocumentFile';
        fileControlApi[url](uploadFile).then((res) => {
            if (res.code === '200') {
                loading.close()
                ElMessage.success('上传成功!')
                files.value.unshift({
                    data:res.data,
                    file:file.file
                });
                emits('onSuccess',files.value);
            }
        });
    }else{
        ElMessage.error('请上传正确格式的文档!');
    }*/
}

/**
 * 移除
 * @param e
 */
const onRemove = (e) => {

}

/**
 * 下载
 */
const onDownload = () => {
  if(props.isTip){
      getInterface(props.templateConfig.fileName, props.templateConfig.apiPath, props.templateConfig.param).then(res=>{
              if (res) {
                  exportExcelFile(res, props.templateConfig.templateName);
              }
      }).catch(error => {
          ElMessage.error(error);
      });
  }
}

const openPopup = () => {
  visible.value = true;
  isLoading.value = false;
}

defineExpose({openPopup});
</script>

<style lang="scss" scoped>
 .el-upload__tip{
   em{
     color: #ff8665;
     cursor: pointer;
   }
 }
</style>
